// echarts引用的主题样式
let colorDeep = "#fff";
if (
  global.localStorage !== undefined &&
  global.localStorage.getItem("pageThem") === "them-light"
) {
  colorDeep = "#000";
}
const themeEcharts = {
  color: [
    "#3088F4",
    "#FFC720",
    "#8378ea",
    "#fb7293",
    "#76da91",
    "#ff9f7f",
    "#67e0e3",
    "#e7bcf3",
    "#32c5e9",
    "#ffdb5c",
    "#9fe6b8",
    "#e690d1",
    "#9d96f5",
    "#96bfff",
    "#37a2da",
    "#e062ae"
  ],
  backgroundColor: "rgba(252,252,252,0)",
  textStyle: {},
  title: {
    textStyle: {
      color: colorDeep,
      fontSize: "15px"
    },
    subtextStyle: {
      color: "#999999"
    }
  },
  line: {
    itemStyle: {
      borderWidth: "2"
    },
    symbolSize: "8",
    symbol: "emptyCircle",
    smooth: false
  },
  radar: {
    itemStyle: {
      borderWidth: "2"
    },
    symbolSize: "8",
    symbol: "emptyCircle",
    smooth: false
  },
  bar: {
    label: {
      color: colorDeep
    },
    itemStyle: {
      barBorderWidth: 0,
      barBorderColor: "#ccc"
    },
    emphasis: {
      itemStyle: {
        barBorderWidth: 0,
        barBorderColor: "#ccc"
      }
    }
  },
  markLine: {
    label: {
      color: colorDeep
    }
  },
  pie: {
    label: {
      color: colorDeep
    },
    itemStyle: {
      borderWidth: 0,
      borderColor: "#ccc"
    },
    emphasis: {
      itemStyle: {
        borderWidth: 0,
        borderColor: "#ccc"
      }
    }
  },
  scatter: {
    itemStyle: {
      borderWidth: 0,
      borderColor: "#ccc"
    },
    emphasis: {
      itemStyle: {
        borderWidth: 0,
        borderColor: "#ccc"
      }
    }
  },
  boxplot: {
    itemStyle: {
      borderWidth: 0,
      borderColor: "#ccc"
    },
    emphasis: {
      itemStyle: {
        borderWidth: 0,
        borderColor: "#ccc"
      }
    }
  },
  parallel: {
    itemStyle: {
      borderWidth: 0,
      borderColor: "#ccc"
    },
    emphasis: {
      itemStyle: {
        borderWidth: 0,
        borderColor: "#ccc"
      }
    }
  },
  sankey: {
    itemStyle: {
      borderWidth: 0,
      borderColor: "#ccc"
    },
    emphasis: {
      itemStyle: {
        borderWidth: 0,
        borderColor: "#ccc"
      }
    }
  },
  funnel: {
    itemStyle: {
      borderWidth: 0,
      borderColor: "#ccc"
    },
    emphasis: {
      itemStyle: {
        borderWidth: 0,
        borderColor: "#ccc"
      }
    }
  },
  gauge: {
    itemStyle: {
      borderWidth: 0,
      borderColor: "#ccc"
    },
    emphasis: {
      itemStyle: {
        borderWidth: 0,
        borderColor: "#ccc"
      }
    }
  },
  candlestick: {
    itemStyle: {
      color: "#e6a0d2",
      color0: "transparent",
      borderColor: "#e6a0d2",
      borderColor0: "#3fb1e3",
      borderWidth: "2"
    }
  },
  graph: {
    itemStyle: {
      borderWidth: 0,
      borderColor: "#ccc"
    },
    lineStyle: {
      width: "1",
      color: colorDeep
    },
    symbolSize: "8",
    symbol: "emptyCircle",
    smooth: false,
    color: ["#3fb1e3", "#6be6c1", "#626c91", "#a0a7e6", "#c4ebad", "#96dee8"],
    label: {
      color: colorDeep
    }
  },
  map: {
    itemStyle: {
      areaColor: "#eeeeee",
      borderColor: "#aaaaaa",
      borderWidth: 0.5
    },
    emphasis: {
      itemStyle: {
        areaColor: "rgba(63,177,227,0.25)",
        borderColor: "#3fb1e3",
        borderWidth: 1
      },
      textStyle: {
        color: "#3fb1e3"
      }
    },
    label: {
      color: colorDeep
    }
  },
  geo: {
    itemStyle: {
      areaColor: "#eeeeee",
      borderColor: "#aaaaaa",
      borderWidth: 0.5
    },
    emphasis: {
      itemStyle: {
        areaColor: "rgba(63,177,227,0.25)",
        borderColor: "#3fb1e3",
        borderWidth: 1
      },
      textStyle: {
        color: "#3fb1e3"
      }
    },
    label: {
      color: colorDeep
    }
  },
  categoryAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: "#cccccc"
      }
    },
    axisTick: {
      show: false,
      lineStyle: {
        color: "#333"
      }
    },
    axisLabel: {
      show: true,
      color: colorDeep
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ["#999"]
      }
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
      }
    }
  },
  valueAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: "#cccccc"
      }
    },
    axisTick: {
      show: false,
      lineStyle: {
        color: "#333"
      }
    },
    nameTextStyle: {
      color: colorDeep
    },
    axisLabel: {
      show: true,
      color: colorDeep
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ["#999"]
      }
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
      }
    }
  },
  logAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: "#cccccc"
      }
    },
    axisTick: {
      show: false,
      lineStyle: {
        color: "#333"
      }
    },
    axisLabel: {
      show: true,
      color: colorDeep
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ["#eeeeee"]
      }
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
      }
    }
  },
  timeAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: "#cccccc"
      }
    },
    axisTick: {
      show: false,
      lineStyle: {
        color: "#333"
      }
    },
    axisLabel: {
      show: true,
      color: colorDeep
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ["#eeeeee"]
      }
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
      }
    }
  },
  toolbox: {
    iconStyle: {
      borderColor: colorDeep
    },
    emphasis: {
      iconStyle: {
        borderColor: colorDeep
      }
    }
  },
  legend: {
    textStyle: {
      color: colorDeep
    }
  },
  tooltip: {
    axisPointer: {
      lineStyle: {
        color: colorDeep,
        width: 1
      },
      crossStyle: {
        color: colorDeep,
        width: 1
      }
    }
  },
  timeline: {
    lineStyle: {
      color: "#626c91",
      width: 1
    },
    itemStyle: {
      color: "#626c91",
      borderWidth: 1
    },
    controlStyle: {
      color: "#626c91",
      borderColor: "#626c91",
      borderWidth: 0.5
    },
    emphasis: {
      itemStyle: {
        color: "#626c91",
        borderWidth: 0.5
      },
      controlStyle: {
        color: "#626c91",
        borderColor: "#626c91",
        borderWidth: 0.5
      },
      textStyle: {
        color: "#626c91"
      }
    },
    checkpointStyle: {
      color: "#3fb1e3",
      borderColor: "#3fb1e3"
    },
    label: {
      color: "#626c91"
    }
  },
  visualMap: {
    color: ["#2a99c9", "#afe8ff"],
    textStyle: {
      color: colorDeep
    }
  },
  dataZoom: {
    backgroundColor: "rgba(255,255,255,0)",
    dataBackgroundColor: "rgba(222,222,222,1)",
    fillerColor: "rgba(114,230,212,0.25)",
    handleColor: "#cccccc",
    handleSize: "100%",
    textStyle: {
      color: "#999999"
    }
  },
  markPoint: {
    label: {
      color: colorDeep
    },
    emphasis: {
      textStyle: {
        color: colorDeep
      }
    }
  }
};

export default themeEcharts;
